<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="./css/common.css"/>
		<title>选择人员</title>
		<style type="text/css">
			.mui-table-view-cell:nth-child(2n) {
				background-color: #F8F8F8;
			}
			.mui-table-view-cell>a:not(.mui-btn) {
				padding-left: 50px;
			}
			.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after {
				left: 10px;
				color: #FA8100;
			}
			.hairline-left .mui-icon {
				font-size: 20px;
				color: #FA8100;
				border: 1px solid;
				border-radius: 50%;
				padding: 0;
				width: 16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				vertical-align: middle;
			}
			.hairline-left .mui-icon:before {
				margin-left: -3px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择人员</h1>
		</header>
		<div class="mui-bar mui-bar-footer flex-center">
			<div id="cancel" class="flex-item color-blue mui-text-center action-item">
				<span class="mui-icon mui-icon-close" style="font-size: 18px;"></span>
				<span class="vertical-middle">取消</span>
			</div>
			<div id="confirm" class="flex-item color-blue mui-text-center action-item hairline-left">
				<span class="mui-icon mui-icon-checkmarkempty"></span>
				<span class="vertical-middle">确定</span>
			</div>
		</div>
		<div id="content" class="mui-content">
			<header class="header mui-h5">
				<span class="title">请选择</span>
			</header>
			<div id="list" class="member-list" :style="{height: height + 'px'}">
				<div id="scroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-radio">
							<li class="mui-table-view-cell" :class="{ 'mui-selected': item.checked }" :data-id = "item.id" v-for="item in members" :key="item.id">
								<a class="mui-navigate-right">{{ item.name }} 【{{ item.username }}】</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/mkeyplus.base.js"></script>
		<script src="../../js/storage.js"></script>
		<script type="text/javascript">
			(function($) {
				var memberVM = null;
				var netStatus = null; // 网络状态
				var cv = null; // 当前webview
				var checkedId = ''; // 被选中的
				
				$.init();
				
				memberVM = new Vue({
					el: '#content',
					data: {
						height: 0, // 人员列表高度
						members: [] // 人员列表
					},
					created:function() {
						this.initHeight()
					},
					methods: {
						// 设置高度
						initHeight: function() {
							this.height = window.innerHeight - 139;
						},
						// 获取待定检列表
						getMembers: function() {
							var that = this;
							console.log('请求人员信息')
							$.baseApp.httpRequst('/api/v2/inspection/syncUserInfo', {
									wind: JSON.parse(localStorage.getItem('org_code'))
								},
								function(res) {
									console.log("人员列表：" + JSON.stringify(res));
									var data = res.data;
									if(res.status === 200) {
										that.members = data;
										if (checkedId) {
											that.setCheckedMember(parseInt(checkedId))
										}
										myStorage.setItem('checkMembers', data); // 获取最新数据后缓存
									} else {
										$.toast(res.message, { type: 'div' })
									}
								}
							);
						},
						// 设置选中人员
						setCheckedMember: function(id) {
							this.members = this.members.map(function(ele) {
								ele.checked = ele.id === id;
								return ele;
							})
						}
					}
				});
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				$.plusReady(function() {
					netStatus = plus.networkinfo.getCurrentType();
					cv = plus.webview.currentWebview();
					checkedId = cv.member || '';
					if (netStatus > 1) {
						// 自动同步数据 服务器拉取
						memberVM.getMembers()
					} else {
						// 离线缓存获取
						console.log(myStorage.getItem('checkMembers'))
						var storageMembers = myStorage.getItem('checkMembers') || [];
						memberVM.members = storageMembers;
					}
					
					var list = document.querySelector('.mui-table-view.mui-table-view-radio');
					list.addEventListener('selected',function(e){
						console.log("当前选中的为1：" + e.detail.el.dataset.id);
						memberVM.setCheckedMember(e.detail.el.dataset.id);
						checkedId = e.detail.el.dataset.id;
					});
				});
				document.getElementById('cancel').addEventListener('tap', function() {
					cv.close();
				});
				document.getElementById('confirm').addEventListener('tap', function() {
					if (checkedId) {
						var prev = cv.opener();
						var names = memberVM.members.filter(function(ele) {
							return ele.id.toString() === checkedId;
						})[0].name;
						mui.fire(prev, 'confirmMember', {
							type: 'manager',
							ids: checkedId,
							names: names
						});
						cv.close();
					} else {
						$.toast('请先选择人员', { type: 'div' })
					}
				});
			})(mui);
		</script>
	</body>
</html>
